<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: black;
           
        }
        .views{
            width: 250px;
            height: 250px;
            margin: 350px auto;
            position: relative;
            /* 设置透视效果  近大远小的效果*/
            perspective: 1000px;
        }
        .box{
            width: 100%;
            height: 100%;
            position: absolute;
            /* 设置3D元素 */
            transform-style: preserve-3d;
            /* 设置看到不同的面的效果 */
            transform: rotateX(-15deg) rotateY(20deg);
            /* animation-name: box;
            transition-timing-function: linear;
            animation-iteration-count: infinite;
            transition-property: all;
            animation-duration: 4.5s; */
            transition:all ease-in-out .3s;
        }

        @keyframes box{
            0%{
                transform: rotateX(0) rotateY(0);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        .box:hover{
            animation-name: box;
            transition-timing-function: linear;
            animation-iteration-count: infinite;
            transition-property: all;
            animation-duration: 4.5s;
        }
        .face{
            width: 100%;
            height: 100%;
            border: 1px solid;
            position: absolute;
            text-align: center;
            line-height: 250px;
            color: #fff;
            transition:all ease-in-out .3s;

        }
        .clear{
            height: 3rem;
        }

        input{
            display: none;
        }
        label{
            width: 6em;
            height: 3em;
            border: 1px solid #ccc;
            color: #fff;
            display: inline-block;
            text-align: center;
            line-height: 3rem;
            /* margin-top: 80px; */
            border-radius: 8px;
            margin-left: 13px;
            margin-top: 5px;
            transition: all 0.6s;
            transition:all linear .3s;

            
        }
        
        input:checked+label{
            background-image: linear-gradient(to left,#fff,black);
            transform: translateY(-15px);
            font-size: 18px;
            box-shadow: 1px 1px 23px #fff;
            margin-left: 16%;
            margin-top: 100px;
        }
        .box:hover .face {
            box-shadow: 1px 1px 130px #f6b2fb;
        }
        .btn{
            display: flex;
            justify-content: center;
        }
        label:hover{
            transform: scale(1.1);
            background-image: linear-gradient(to left,#fff,black);
            font-size: 18px;
            transform: translateY(-15px);
        }
        /* 设置六个面的位置 */
        .front{
            transform: translate3d(0,0,125px);
        }
        .back{
            transform: rotateY(180deg) translate3d(0,0,125px);
        }
        .left{
            transform: rotateY(-90deg) translate3d(0,0,125px);
        }
        .right{
            transform: rotateY(90deg) translate3d(0,0,125px);
        }
        .top{
            transform: rotateX(90deg) translate3d(0,0,125px);
        }
        .bottom{
            transform: rotateX(-90deg) translate3d(0,0,125px);
        }
        #front:checked ~ .views .box{
            transform:rotateX(-15deg) rotateY(20deg);
        }
        #back:checked ~ .views .box{
            transform:rotateX(-15deg) rotateY(200deg);
        }
        #left:checked ~ .views .box{
            transform:rotateX(-15deg) rotateY(110deg);
        }
        #right:checked ~ .views .box{
            transform:rotateX(-15deg) rotateY(-70deg);
        }
        #top:checked ~ .views .box{
            transform: rotateY(20deg) rotateX(-90deg);
        }
        #bottom:checked ~ .views .box{
            transform: rotateY(20deg) rotateX(90deg);
        }
        #big:checked ~ .views .box{
            transform: scale(2) rotateX(15deg) rotateY(20deg);
        }
        #small:checked ~ .views .box{
            transform: scale(0.3) rotateX(15deg) rotateY(20deg);
        }

        #rotate:checked ~ .views .box{
           animation: rotate 5s linear infinite;
        }

        #btn:checked ~ .views .face{
           animation: rotate1 .3s linear infinite;
        }

        @keyframes rotate{
            0%{
                transform: rotateX(0) rotateY(0);
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg);
                
            }
        }

        @keyframes rotate1{
            0%{}
            100%{
                margin-top: -15px;
                box-shadow: 1px 1px 150px #fff;
            }
        }

        /* 展开 */

        #open:checked ~ .views .box .front{
            transform:translate3d(0px, 0px, 300px);
        }

        #open:checked ~ .views .box .back{
            transform: rotateY(180deg) translate3d(0,0,380px);
        }

        #open:checked ~ .views .box .left{
            transform: rotateY(-90deg) translate3d(0,0,380px);
        }

        #open:checked ~ .views .box .right{
            transform: rotateY(90deg) translate3d(0,0,380px);
        }

        #open:checked ~ .views .box .top{
            transform: rotateX(90deg) translate3d(0,0,380px);
        }

        #open:checked ~ .views .box .bottom{
            transform: rotateX(-90deg) translate3d(0,0,380px);
        }
        

    
        

       
    </style>
</head>
<body>

    <input type="radio" name="box" id="front" checked />
    <label for="front">法拉利</label>
    
    <input type="radio" name="box" id="back" />
    <label for="back">奔驰</label>
    
    <input type="radio" name="box" id="left" />
    <label for="left">宝马</label>
    
    <input type="radio" name="box" id="right" />
    <label for="right">玛莎拉蒂</label>
    
    <input type="radio" name="box" id="top" />
    <label for="top">保时捷</label>
    
    <input type="radio" name="box" id="bottom" />
    <label for="bottom">劳斯莱斯</label>
    
    <input type="radio" name="box" id="big" />
    <label for="big">放大</label>
    
    <input type="radio" name="box" id="small" />
    <label for="small">缩小</label>
    
    <input type="radio" name="box" id="rotate" />
    <label for="rotate">旋转</label>
    
    <input type="radio" name="box" id="open" />
    <label for="open">展开</label>

    <input type="radio" name="box" id="btn" />
    <label for="btn">发光</label>
 
    
    <div class="clear"></div>
     <!-- 3D空间 -->
     <div class="views">
        <!-- 3D元素 -->
        <div class="box">
            <div class="face front">
                <img src="https://img2.autotimes.com.cn/news/2021/11/1104_105404769905.jpg" width="100%" height="100%" alt="">
            </div>
            <div class="face back">
                <img src="https://n.sinaimg.cn/auto/265/w1599h1066/20211014/0070-60e2a9efbed2acdef76b0bcb084e1b1c.jpg" width="100%" height="100%" alt="">
            </div>
            <div class="face left">
                <img src="https://n.sinaimg.cn/sinakd20210617ac/232/w1106h726/20210617/ef86-krpikqf6174680.jpg" width="100%" height="100%" alt="">
            </div>
            <div class="face right">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa6b3f16e-c7be-4f09-bc0f-6619693ece2d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690508160&t=7cf0914d463d9f1ea7095fd4c86238f3" width="100%" height="100%" alt="">
            </div>
            <div class="face top">
                <img src="https://img2.autotimes.com.cn/news/2022/07/0702_110412299313.jpg" width="100%" height="100%" alt="">
            </div>
            <div class="face bottom">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F222e0096-6681-452f-ac90-2e4d7a29ed22%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690508251&t=d8e3728a0c5ff22ac523ea49d22c6d28" width="100%" height="100%" alt="">
            </div>
        </div>
    </div>
</body>
</html>